<script setup lang="ts">
import requestUtil from '@/unit/request.ts'
import type {AxiosResponse} from 'axios'

// 定义API响应的数据结构接口
/**
 * 定义API响应数据的接口结构
 * 用于描述从后端API返回的数据格式
 *
 * @property code - 状态码，200表示成功
 * @property token - 可选的认证令牌
 * @property data - 可选的响应数据内容
 * @property {any} key - 允许响应中包含其他任意属性
 */
interface ApiResponse {
  code: number;
  token?: string;
  data?: any;

  [key: string]: any;
}


/**
 * 处理用户登录的异步函数
 * 该函数调用后端接口进行JWT认证，成功后将token存储到会话中
 */
const handleLogin = async () => {
  // 发起JWT认证请求
  let result: AxiosResponse<ApiResponse> = await requestUtil.get("user/jwt_test/");
  let data = result.data;
  // 根据返回的code判断登录是否成功
  if (data.code == 200) {
    const token = data.token;
    // 登录成功，打印成功信息及token，并将其存储到会话中
    if (token) {
      console.log("登录成功：token=" + token);
      window.sessionStorage.setItem("token", token);
    }
  } else {
    // 登录失败，打印错误信息
    console.log("登录出错！")
  }
}

/**
 * 处理获取用户列表的异步函数
 * 该函数调用后端接口获取用户列表信息，成功后打印用户列表
 */
const handleUserList = async () => {
  try {
    // 发起获取用户列表的请求
    let result: AxiosResponse<ApiResponse> = await requestUtil.get("user/test/");
    let data = result.data;
    // 根据返回的code判断请求是否成功
    if (data.code == 200) {
      const userList = data.data;
      // 请求成功，打印用户列表信息
      console.log("用户列表信息：userList=" + userList);
    } else {
      // 请求失败，打印错误信息
      console.log("出错！")
    }
  } catch (error) {
    // 网络错误或其它异常处理
    console.error("登录请求失败:", error);
    console.log("网络错误或服务器无响应");
  }
}

</script>
<template>
  <!--  登录测试-->
  <div>
    <el-button type="primary" @click="handleLogin">测试登录</el-button>
    <el-button type="danger" @click="handleUserList">测试获取用户列表信息</el-button>
  </div>

</template>

<style scoped lang="scss">

</style>